<template>
    <div class="withaccound_main">
        <div class="bottom">
            <span>
                <van-icon @click="$router.push('/replace/balance')" class="go-back" name="arrow-left" />
            </span>
            <span>提现账户</span>
        </div>
        <div class="count_list">
            <label>
            <span class="weight">账户</span>
            <span class="weight">类型</span>
            </label>
            <span class="edit_div operating">操作</span>
        </div>
        <div class="count_list" v-for="(item,index) in payDataList" :key="index">
            <label :for="item.id">
                <span>{{item.account | num}}{{'('+item.account_name+')'}}</span>
                <span>{{item.account_type==1?'支付宝':'银行卡'}}</span>
            </label>
            <span class="edit_div">
                <van-icon name="edit" @click='editPay(item)'/>
                <van-icon name="cross" @click='delPay(item)' />
            </span>
        </div>
        <el-dialog
            title="修改账户"
            style="text-align: center;"
            :visible.sync="editDialog"
            width="35%"
            :show-close="true"
            @close="showbxnum=false"
        >
            <div class="zfbnum">
                <span>{{$route.query.type}}</span>
            </div>
            <div class="subzfb" v-if="payType == 1">
                <van-field v-model="zfbName" placeholder="请输入姓名" label="用户名" readonly/>
                <van-field v-model="zfbNum" class="van-field-isRequired" type="digit" placeholder="请输入支付宝账号" label="支付宝账号" />
            </div>
            <div class="subzfb" v-if="payType== 2">
                <van-field v-model="yhkName" readonly label="开户人" />
                <van-field v-model="yhkNum" class="van-field-isRequired" type="digit" placeholder="请输入银行卡号" label="卡号" />
                <van-field v-model="yhkKhh" class="van-field-isRequired" placeholder="请输入开户行" label="开户行" />
            </div>
            <div class="is_default">
                设置为默认账户:
                <van-switch class="check_def" v-model="isDefault" active-color="#07c160" inactive-color="#ccc" size="16px" />
            </div>
            <button class="trueadd_btn" @click="trueEdit">
                确定
            </button>
        </el-dialog>
    </div>
</template>
<script>
import {delWithdrawal,getWithdrawal,editWithdrawal} from  "@/api/withdrawal";
import { Dialog,Toast} from 'vant';
import {bankCard,aliAccout} from "@/utils/validate.js";
export default {
    data(){
        return {
            payType:1,
            payDataList:[],
            editDialog:false,
            id:'',
            payType:'1',
            data:{},
            ischecked: false,
            //支付宝账号
            zfbNum: '',
            //姓名
            zfbName: '',
            //银行卡号
            yhkNum: '',
            //开户行
            yhkKhh: '',
            yhkName:'aaa',
            isDefault: false
        }
    },
    methods:{
        showEdit(){
            this.editDialog = true
        },
        getAccountList(){
            getWithdrawal().then(res=>{
                this.payDataList = res.data
                if (this.payDataList.length == 0) {
                    this.$router.push('/replace/balance')
                }
            })
        },
        editPay(item){
            this.zfbNum = item.account
            this.zfbName = item.account_name
            this.yhkNum = item.account
            this.yhkKhh = item.sub_branch
            this.id = item.id
            this.yhkName = item.account_name
            this.payType = item.account_type
            this.isDefault = item.is_default == 1?true:false

            this.editDialog = true
            console.log(item)

        },
        delPay(item){
            Dialog.confirm({
            title: '删除',
            message: `确认删除账户${item.account}?`,
            })
            .then(() => {
                // on confirm
                let params = {
                wr_id:item.id
                }
                delWithdrawal(params).then(res=>{
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.$router.go(0);
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
            
        },
        editpay(params) {
            editWithdrawal(params).then(res => {
                if (res.code === 200) {
                    this.$message.success('修改成功');
                    this.$router.push('/replace/withaccount')
                } else {
                    this.$message.error('修改失败');
                }
            })
        },
        trueEdit() {
            // if (this.ischecked) {
            // if (this.payType == '1') {
            if(this.payType == 1){
                if (this.zfbNum != '' && this.zfbName != '' && aliAccout(this.zfbNum)) {
                    let params = {
                        account: this.zfbNum,
                        account_name: this.zfbName,
                        account_type: this.payType,
                        is_default: this.isDefault ? 1 : 2,
                        wr_id:this.id
                    }
                    this.editpay(params)
                } else {
                    switch ('') {
                        case this.zfbNum:
                            Toast('请输入支付宝账号')
                            break;
                        case this.zfbName:
                            Toast('请输入姓名')
                            break;
                        default:
                            Toast('请输入正确的支付宝账号')
                            break;
                    }
                }
            }
            if (this.payType == 2) {
                if (this.yhkNum != '' && this.yhkKhh != '' && bankCard(this.yhkNum)) {
                    let params = {
                        account: this.yhkNum,
                        account_name: this.yhkName,
                        sub_branch:this.yhkKhh,
                        account_type: this.payType,
                        is_default: this.isDefault ? 1 : 2,
                        wr_id:this.id
                    }
                    this.editpay(params)
                } else {
                    switch ('') {
                        case this.yhkNum:
                            Toast('请输入银行卡号');
                            break;
                        case this.yhkKhh:
                            Toast('请输入开户行');
                            break;
                        default:
                            Toast('请输入正确的银行卡号')
                            break;
                    }
                }
            }
        // } else {
        //     Toast('请先勾选我已阅读且同意相关《服务条款》和《隐私政策》')
        // }
        }
    },
    deactivated() {
        this.$destroy(true); //销毁组件
    },
    filters:{
        num(value){
            return value.slice(0,3) + '****' + value.slice(-3)
        }
    },
    created(){
        this.getAccountList()
    }
}
</script>
<style lang="less" scoped>
.van-cell.van-field {
    padding-left: 0;
    margin-top: 12px;
}
.bottom {
    padding: 0 .4rem;
    box-sizing: border-box;
    line-height: 1.333333rem;
    font-size: 20px;
    text-align: center;
    >span {
        &:nth-child(1) {
            height: 1.333333rem;
            float: left;
            text-align: center;
            font-weight: 700;

            i {
                line-height: 1.333333rem;
            }
        }

        &:nth-child(2) {
            text-align: center;
            font-weight: 700;
        }
    }
}
.zfbnum {
    margin-top: 15px;
    padding: 0 12px;
    .rightjiantou {
        float: right;
    }
}

.subzfb {
    padding-left: 12px;

    input {
        display: block;
        margin-top: 30px;
        border: none;
    }
}

.isread {
    margin-top: 17px;
    font-size: 12.5px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #353535;
    padding-left: 12px;

    input {
        width: 11px;
        height: 11px;
        margin-right: 4.5px;
    }

    a {
        font-weight: 600;
    }
}

.is_default {
    padding-left: 12px;
    margin-top: 15px;
    text-align: left;
    .check_def {
        vertical-align: middle;
    }
}
.trueadd_btn {
    width: 325px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #0016FF;
    border-radius: 22.5px;
    text-align: center;
    margin-top: 50px;
    position:initial !important
}
// -----------------------------
.withaccound_main{
    width: 50%;
    margin: auto;
}
.nav-bar {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 3000;
    margin-bottom: 20px;
    .bottom {
        padding: 0 .4rem;
        box-sizing: border-box;
        line-height: 1.333333rem;
        font-size: 20px;
        z-index: 1;
        text-align: center;
        >span {
            &:nth-child(1) {
                height: 1.333333rem;
                float: left;
                text-align: center;
                font-weight: 700;
                i{
                    line-height: 1.333333rem;
                }
            }
            &:nth-child(2) {
                text-align: center;
                font-weight: 700;
                
            }
            &:nth-child(3) {
                font-size: 14px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #006CFF;
                float: right;
            }
        }
    }
}  
.count_list{
    width: 100%;
    height: 20px;
    margin-top: 10px;
    span{
        display: inline-block;
        text-align: center;
    }
    label{
        span:nth-child(1).weight,
        span:nth-child(2).weight
        {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #353535;
        }
        span:nth-child(1){
            width: 40%;
            font-size: 14px;
            font-family: PingFang-SC-Regular, PingFang-SC;
            font-weight: 400;
            color: #353535;
        }
        span:nth-child(2){
            width: 28%;
            font-size: 14px;
            font-family: PingFang-SC-Regular, PingFang-SC;
            font-weight: 400;
            color: #353535;
        }
    }
    .operating.edit_div{
        font-size: 14px;
        color: #000;
    }
    .edit_div{
        width: 13%;
        float: right;
        margin-right: 10px;
        font-size: 20px;
        color: #006CFF;
        i:nth-child(1){
            margin-right: 6px;
        }
    }
}
.trueadd_btn {
    width: 325px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #0016FF;
    border-radius: 22.5px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: calc(~'50% - 162.5px')
}
</style>